<template>
  <div class="classifyBox">
    <herderBox :name="headText"></herderBox>
    <main class="classify-main">
      <div class="class-left">
        <div
          :class="asideIndex == index ? 'on' : ''"
          v-for="(item, index) in list"
          :key="'aside' + item.id"
          @click="leftClick(index)"
        >
          {{ item.cate_name }}
        </div>
      </div>
      <div class="class-right" @scroll="rightScroll">
        <div v-for="item in list" :key="'right' + item.id" class="right-center">
          <h4 class="right-h4">{{ item.cate_name }}</h4>
          <div class="goods-box">
            <div
              v-for="v in item.children"
              :key="'content' + v.id"
              class="goods"
              @click="goodsClick(v)"
            >
              <img v-lazy="v.pic" alt class="img-size" />
              <div>{{ v.cate_name }}</div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { TagInfo } from "../../api/index";
import herderBox from "../../components/topSearch.vue";

const headText = ref();

const list = ref([]);
const asideIndex = ref(0);
const leftClick = (index) => {
  asideIndex.value = index;
};
const goodsClick = (v) => {
  console.log(v);
};
const rightScroll = (e) => {
  console.log(e);
};
onMounted(() => {
  TagInfo().then((res) => {
    list.value = res.data;
  });
});
</script>

<style lang="less" scoped>
.classifyBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .classify-main {
    flex: 1;
    display: flex;
    overflow: scroll;
    .class-left {
      width: 2.1867rem;
      width: 25%;
      background-color: #f7f7f7;
      overflow-y: scroll;

      div {
        height: 1.2rem;
        line-height: 1.2rem;
        text-align: center;
        font-size: 0.2933rem;
        color: #424242;
        border-left: 0.0533rem solid rgba(0, 0, 0, 0);
      }

      .on {
        border-left: 0.0533rem solid #fc4141;
        color: #fc4141;
        font-weight: 700;
        background-color: #fff;
      }
    }

    .class-right {
      flex: 1;
      // width: auto;
      // height: 100%;
      padding: 0 0.16rem;
      box-sizing: border-box;
      overflow: scroll;

      .right-center {
        overflow: scroll;
        .right-h4 {
          height: 1.3333rem;
          line-height: 1.3333rem;
          text-align: center;
        }

        .goods-box {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .goods {
            width: calc(100% / 3.1);
            text-align: center;

            .img-size {
              width: 1.3333rem;
              height: 1.3333rem;
            }
          }
        }
      }
    }
  }
}
</style>
